<template>
    <div class="more">
        <p class="mp">添加新地址</p>
        <div class="cont_m">
            <div class="m1">
                <p class="cp4">姓名</p>
                <input type="text" class="inUse2">
            </div>
            <div class="m1">
                <p class="cp4">手机</p>
                <input type="text" class="inUse2">
            </div>
            <div class="m1">
                <p class="cp4">地址</p>
                <div class="mm1">
                    <select name=""  class="dz" value="清选择" :ref="placeRef" @change="handleProvin">
                        <option v-for="(item, index) in place.provinces" :value="index" :key="index">{{ item
                        }}
                        </option>
                    </select>
                    <select name=""  class="dz" value="清选择" :ref="placeRef" @change="handleCity">
                        <option value="">市</option>
                    </select>
                    <select name=""  class="dz" value="清选择" :ref="placeRef">
                        <option value="">区</option>
                    </select>
                </div>
            </div>
            <div class="m1">
                <p class="cp4">详细地址</p>
                <input type="text" class="inUse2">
            </div>
            <div class="m1">
                <input type="checkbox"><span class="ms">设为默认收货地址</span>
            </div>
            <div class="m2">
                <router-link to="/user/addressedit"><button class="mbtn">保存</button></router-link>
                <router-link to="/user/addressedit"><button class="mbtn2">返回</button></router-link>
            </div>
        </div>
        <div class="bag-bottom">
            <img src="../../public/images/user/bag.jpg" alt="">
            <div class="texts">
                <p>来AIBU，一起爱步一下</p>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, reactive } from "vue"
// 省市区的3级联动功能
const place = reactive({
    provinces: ["江西", "湖南"],
    citys: [
        ['江西1', '江西2', '江西3'],
        ['湖南1', '湖南2', '湖南3'],
    ],
    areas: [
        [
            ['江西1-1', '江西1-2'],
            ['江西2-1', ' 江西2-2'],
            ['江西3-1', ' 江西3-2'],
        ],
        [
            ['湖南1-1', '湖南1-2'],
            ['湖南2-1', ' 湖南2-2'],
            ['湖南3-1', ' 湖南3-2'],
        ]
    ]
})

// 获取省 市 区份的下标
let pro_index = 0;
let city_index = 0;
let area_index = 0;
// 生成添加option元素
function createOptions(el, vari, index) {
    for (let i = 0; i < vari.length; i++) {
        let option = new Option()
        option.value = vari[i]
        option.innerText = vari[i]
        el.appendChild(option)
    }
}
// 省市 省区联动
function handleProvin(e) {
    pro_index = e.target.selectedIndex
    // 清空市区内的内容
    el_place.value[1].innerHTML = ""
    el_place.value[2].innerHTML = ""
    createOptions(el_place.value[1], place.citys[pro_index], pro_index)
    createOptions(el_place.value[2], place.areas[pro_index][0])
}
// 市区联动
function handleCity(e) {
    area_index = e.target.selectedIndex
    // 清空市区内的内容
    el_place.value[2].innerHTML = ""
    createOptions(el_place.value[2], place.areas[pro_index][area_index])
}

// 获取:ref=placeRef元素
let el_place = ref([])
const placeRef = (el) => {
    el_place.value.push(el)
}


</script>
<style lang="less">
.more {
    margin: 0 auto;
    .mp {
        color: #000;
        font-size: 24px;
        font-weight: bolder;
    }

    .cont_m {
        width: 1220px;
        height: 487px;
        background-color: white;
        box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
        overflow: hidden;
        margin-top: 40px;

        .m1 {
            margin-top: 30px;
            margin-left: 30px;

            .ms {
                font-size: 16px;
            }

            .mm1 {
                display: flex;
                justify-content: space-between;
                width: 1160px;
                height: 35px;

                .dz {
                    border: 0;
                    outline: none;
                    border-bottom: 1px solid #979797;
                    width: 356px;
                    height: 35px;
                    background: white;
                }
            }
        }

        .m2 {
            width: 1160px;
            height: 50px;
            display: flex;
            margin-left: 30px;
            margin-top: 30px;

            .mbtn {
                font-size: 16px;
                color: white;
                width: 170px;
                height: 40px;
                background: #000;
            }

            .mbtn2 {
                font-size: 16px;
                color: #000;
                width: 170px;
                height: 40px;
                background: white;
                margin-left: 15px;
            }
        }

        .inUse2 {
            outline: none;
            border-top:none;
            border-left:none;
            border-right:none;
            border-bottom: 1px solid #979797;
            width: 1160px;
            height: 35px;
            background: white;
        }
    }
    .bag-bottom {
    width: 1220px;
    height: 378px;
    position: relative;
    margin-top: 20px;
}

.bag-bottom img {
    width: 1220px;
}

.texts {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%);
    text-align: center;
}

.texts p {
    color: white;
    font-weight: lighter;
    font-size: 20px;
}

}
</style>